<template>
	<view class="container">
		<view>

			<view class="bg-color5 padding-sm text-sm text-white text-center">
				提示：根据国家政策要求，发布信息前需要实名认证
			</view>
			<view class="bg-white padding">
				<view class="bg-white text-13 flex justify-between align-center">
					<view class="text-333 flex-sub text-bold">
						店铺名称
					</view>
					<input type="text" v-model="shopName" value="" class="text-13 flex-treble" placeholder="请输入店铺名称" />
				</view>
				<view class="bg-white text-13 flex justify-between align-center margin-top-sm" @click="changeAddress">
					<view class="text-333 flex-sub text-bold">
						地址
					</view>
					<view class="text-767696 margin-right-xs">
						{{address || '请选择'}}
					</view>
					<!-- <input type="text" v-model="address" value="" class="text-13 flex-treble" placeholder="请输入店铺地址" /> -->
				</view>
				<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
					<view class="text-333 flex-sub text-bold">
						联系电话
					</view>
					<input type="number" v-model="mobile" value="" class="text-13 flex-treble" placeholder="请输入店铺联系电话" />
				</view>
				<view class="text-13 text-333 text-bold margin-top-sm">
					上传营业执照及店铺LOGO
				</view>
				<view class="text-767696 bg-white margin-top text-sm">
					请上传清晰身份证件，避免信息模糊审核不通过
				</view>
				<view class="flex justify-between align-center m-card margin-top">
					<view class="flex justify-center align-center flex-direction">

						<view v-if='credentialsPic' style="position: relative;"
							class="flex justify-center align-center i-left">
							<image style="width: 100%;height: 100%;" :src="credentialsPic" mode=""></image>
							<view class="cu-tag bg-red" @tap.stop="DelCredent"
								style="right:0;top:0;position: absolute;">
								<text class="cuIcon-close"></text>
							</view>
						</view>

						<view v-else class="flex justify-center align-center i-left" @click="uploadCredentialsPic">
							<image :src="baseUrl +'/static/add.png'" mode=""></image>
						</view>

						<view class="text-sm text-999 margin-top-sm">
							营业执照
						</view>
					</view>
					<view class="flex justify-center align-center flex-direction">
						<view v-if='logo' style="position: relative;" class="flex justify-center align-center i-left">
							<image style="width: 100%;height: 100%;" :src="logo" mode=""></image>
							<view class="cu-tag bg-red" @tap.stop="DelLogo" style="right:0;top:0;position: absolute;">
								<text class="cuIcon-close"></text>
							</view>
						</view>


						<view v-else class="flex justify-center align-center i-right" @click="uploadLogo">
							<image :src="baseUrl +'/static/add.png'" mode=""></image>
						</view>
						<view class="text-sm text-999 margin-top-sm">
							LOGO
						</view>
					</view>
				</view>

			</view>
			<view class="margin-top-sm padding bg-white">
				<view class="bg-white text-13 flex justify-between align-center">
					<view class="text-333 flex-sub text-bold">
						法人姓名
					</view>
					<input type="text" v-model="leaderName" value="" class="text-13 flex-treble"
						placeholder="请输入法人姓名" />
				</view>
				<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
					<view class="text-333 flex-sub text-bold">
						法人证件号
					</view>
					<input type="text" v-model="leaderId" value="" class="text-13 flex-treble"
						placeholder="请输入法人身份证号" />
				</view>
				<view class="text-13 text-333 text-bold margin-top-sm">
					上传法人身份证
				</view>
				<view class="text-767696 bg-white margin-top-sm text-sm">
					请上传清晰身份证件，避免信息模糊审核不通过
				</view>
				<view class="flex justify-between align-center IDcard margin-top-sm">
					<view class="flex justify-center align-center flex-direction">
						<view v-if='leaderIdPicBack' style="position: relative;"
							class="flex justify-center align-center i-left">
							<image style="width: 100%;height: 100%;" :src="leaderIdPicBack" mode=""></image>
							<view class="cu-tag bg-red" @tap.stop="DelBack" style="right:0;top:0;position: absolute;">
								<text class="cuIcon-close"></text>
							</view>
						</view>
						<view v-else class="flex justify-center align-center i-left" @click="uploadBack">
							<image :src="baseUrl +'/static/positive.png'" mode=""></image>
						</view>
						<view class="text-sm text-999 margin-top-sm">
							身份证人像面
						</view>
					</view>
					<view class="flex justify-center align-center flex-direction">
						<view v-if='leaderIdPicFront' style="position: relative;"
							class="flex justify-center align-center i-left">
							<image style="width: 100%;height: 100%;" :src="leaderIdPicFront" mode=""></image>
							<view class="cu-tag bg-red" @tap.stop="DelFont" style="right:0;top:0;position: absolute;">
								<text class="cuIcon-close"></text>
							</view>
						</view>


						<view v-else class="flex justify-center align-center i-right" @click="uploadFont">
							<image :src="baseUrl +'/static/negative.png'" mode=""></image>
						</view>
						<view class="text-sm text-999 margin-top-sm">
							身份证国徽面
						</view>
					</view>
				</view>
			</view>
			<view class="margin-top-sm padding bg-white">
				<view class="flex justify-between align-center">
					<view class="text-13 text-333 text-bold">
						选择技工服务类型（多选）
					</view>
					<view class="flex justify-start align-center" @click="checkType">
						<view class="">
							请选择
						</view>
						<view class="cuIcon-right lg margin-left-xs">

						</view>
					</view>
				</view>
				<view class="flex flex-wrap margin-top-xs">
					<view class="bg-F4F4F4 round margin-left-xs text-df margin-top-sm color t-btn"
						v-for="item in checkeds">
						{{item.name}}
					</view>
				</view>
			</view>

			<view class="margin-top-sm padding bg-white">
				<view class="text-13 text-333 text-bold">
					上传门头照片和店内照片
				</view>
				<view style="flex-wrap: wrap;" class="margin-top flex justify-start align-center other-img">
					<view v-if='imgList.length!=0' style="display: flex;">
						<view v-for="item in imgList" style="position: relative;">
							<image style="margin-bottom: 20rpx;" :src="item" mode=""></image>
							<view class="cu-tag bg-red" @tap.stop="DelotherShopPic(index)"
								style="right:0;top:0;position: absolute;">
								<text class="cuIcon-close"></text>
							</view>
						</view>

					</view>



					<view class="solids flex justify-center align-center" @tap="ChooseOtherShopPic">
						<text class='cuIcon-cameraadd text-30'></text>
					</view>
				</view>



			</view>
			<view class="margin-top-sm padding bg-white">
				<view class="text-13 text-333 text-bold">
					其他资质证明
				</view>
				<view style="flex-wrap: wrap;" class="margin-top flex justify-start align-center other-img">

					<view v-if='imgList2.length!=0' style="display: flex;">
						<view v-for="item in imgList2" style="position: relative;">
							<image style="margin-bottom: 20rpx;" :src="item" mode=""></image>
							<view class="cu-tag bg-red" @tap.stop="DelotherCredent(index)"
								style="right:0;top:0;position: absolute;">
								<text class="cuIcon-close"></text>
							</view>
						</view>

					</view>

					<view class="solids flex justify-center align-center" @tap="ChooseImage">
						<text class='cuIcon-cameraadd text-30'></text>
					</view>
				</view>
			</view>
			<block v-if='!disabled'>
				<view class="text-sm text-red padding-sm">
					*缴纳保证金（可退）：1000元
				</view>
				<button class="text-15 text-white bg-color padding text-center btn round" @click="submit">确定</button>
				<view class="text-sm text-333 margin-bottom text-center">
					上传身份信息后，平台将24小时内审核
				</view>
			</block>
			<block v-else>

				<button class="text-15 text-white bg-color padding text-center btn round" @click="edit">编辑</button>

			</block>

			<tki-tree @confirm='handChecked' ref="tkitree" :multiple='true' idKey='id' :range="options" rangeKey="name"
				confirmColor="#4e8af7" />
		</view>
		<!-- <button v-if="id" @click="add_operator" class="text-15 text-white bg-color padding text-center btn round">申请加入</button> -->
	</view>
</template>

<script>
	import tkiTree from "@/components/tki-tree/tki-tree.vue"
	import {
		checkIDCard
	} from '@/common/js/idCard.js'
	import {
		appConfig
	} from '@/common/js/config.js'
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				shopName: '', //店铺名称
				address: '', //地址
				mobile: '', //联系电话
				logo: '', //店铺Logo
				leaderName: '', //法人姓名
				leaderId: '', //法人证件号
				leaderIdPicBack: '', //反面
				leaderIdPicFront: '', //正面,
				mobile: '', //联系人
				credentialsPic: '', //营业执照，
				shopType: 2,
				shopServiceCategorys: '', //服务类型
				otherCredentialsPic: '', //其他资质
				otherShopPic: '', //店内照片
				imgList: [],
				imgList2: [],
				options: [],
				checkeds: [],
				longitude: '',
				latitude: '',
				detailedAddress: '',
				disabled: false,
				userInfo: {},
				userInfoMsg: {},
				shopServiceSupportList: [],
				id: ''
			};
		},

		components: {
			tkiTree
		},

		onLoad(options) {
			this.getTreeList()

			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo.shopServiceIdApply) {
				this.userInfo = userInfo
				if (options.id) {
					// this.id = options.id
					uni.setNavigationBarTitle({
						title: '运营商详情'
					})
					this.userInfo.shopServiceIdApply = options.id
				}
				this.disabled = true
				this.getDetail()
			}
		},
		methods: {
			checkType() {
				this.$refs.tkitree._show()
			},
			//上传营业执照
			uploadCredentialsPic() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.credentialsPic = req.data
							console.log(this.credentialsPic)
						})
					}
				});
			},
			//删除营业执照
			DelCredent() {
				this.credentialsPic = ''
			},
			//上传店铺logo  
			uploadLogo() {
				console.log(1111)
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.logo = req.data

						})
					}
				});
			},
			//删除店铺logo
			DelLogo() {
				this.logo = ''
			},
			//上传身份证反面
			uploadBack() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.leaderIdPicBack = req.data

						})
					}
				});
			},
			//删除身份证反面
			DelBack() {
				this.leaderIdPicBack = ''
			},
			//上传身份证正面
			uploadFont() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.leaderIdPicFront = req.data

						})
					}
				});
			},
			//删除身份证正面
			DelFont() {
				this.leaderIdPicFront = ''
			},



			//其他资质图片
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.imgList2.push(req.data)
							console.log(this.imgList2)

						})
					}
				});
			},
			//删除其他资质图片
			DelotherCredent(index) {
				this.imgList2.splice(index, 1)
			},
			//删除店内图片	
			DelotherShopPic(index) {
				this.imgList.splice(index, 1)
			},

			ChooseOtherShopPic() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch(req => {
							console.log(req)
							this.imgList.push(req.data)

						})
					}
				});
			},
			//获取服务分类
			async getTreeList() {
				const [err, res] = await this.$get(this.$api.home_categoryTreeList, {
					type: 2,
				});
				if (res) {
					this.options = res.data;
					console.log(res);
				}
			},
			handChecked(data) {
				console.log(data)
				const array = []
				if (data.length != 0) {
					for (let i in data) {
						array.push(data[i].id)
					}
					this.shopServiceCategorys = array.toString()
					this.checkeds = data

				}
			},
			changeAddress() {
				let that = this;
				// #ifdef  APP-PLUS
				uni.navigateTo({
					url: "/pagesA/pages/chooseLocation/chooseLocation?serviceCenter=1",
					animationType: "slide-in-bottom",
				})
				// #endif
				// #ifdef  MP-WEIXIN
				uni.chooseLocation({
					success: function(res) {
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
						that.address = res.address;
						that.longitude = res.longitude;
						that.latitude = res.latitude;

						that.detailedAddress = res.name;
					},
				});
				// #endif
			},
			edit() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '你确定要更新运营商信息吗',
					success: res => {
						console.log(res)
						const {
							shopName,
							address,
							logo,
							leaderName,
							leaderId,
							leaderIdPicBack,
							leaderIdPicFront,
							mobile,
							credentialsPic,
							shopType,
							shopServiceCategorys,
							otherCredentialsPic,
							otherShopPic,
							imgList,
							imgList2,
							longitude,
							latitude
						} = this
						if (!this.shopName) {
							return this.$util.msg('请输入店铺名字')
						}
						if (!this.address) {
							return this.$util.msg('请输入店铺地址')
						}
						if (!this.mobile) {
							return this.$util.msg('请输入联系方式')
						}
						if (!this.credentialsPic) {
							return this.$util.msg('请上传营业执照')
						}
						if (!this.logo) {
							return this.$util.msg('请上传店铺logo')
						}
						if (!this.leaderName) {
							return this.$util.msg('请输入法人姓名')
						}
						if (!checkIDCard(this.leaderId)) {
							return this.$util.msg('法人身份证格式有误')
						}
						if (!this.leaderIdPicBack) {
							return this.$util.msg('请上传身份证反面')
						}
						if (!this.leaderIdPicFront) {
							return this.$util.msg('请上传身份证正面')
						}
						if (!this.shopServiceCategorys) {
							return this.$util.msg('请选择技工服务类型')
						}
						console.log(this.otherCredentialsPic)
						if (this.imgList.length == 0) {
							return this.$util.msg('请上传门头照片和店内照片')
						}
						if (this.imgList2.length == 0) {
							return this.$util.msg('请上传其他资质正面')
						}
						const data = {
							shopName,
							address: this.address,
							longitude,
							latitude,
							mobile,
							credentialsPic,
							logo,
							leaderName,
							leaderId,
							leaderIdPicBack,
							leaderIdPicFront,
							shopServiceCategorys,
							shopType,
							otherCredentialsPic: imgList2.toString(),
							otherShopPic: imgList.toString(),
							userId: uni.getStorageSync('userId') || appConfig.userId,
                            id:this.id
						}
						console.log(data)
					

						this.$jsonPost(this.$api.updateShop, data).then(rs => {
							console.log(rs)
							const [err, res] = rs
							if (res) {
								if (res.code == 200) {


									uni.showToast({
										title: '更新成功',
										duration: 1500,
										icon: 'none'

									})

									setTimeout(() => {
										uni.navigateBack()
									}, 2000)




								} else {
									that.$util.msg(res.message)

								}
							}
						})


					}
				})
			},
			submit() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '你确定要认证为运营商吗',
					success: res => {
						console.log(res)
						const {
							shopName,
							address,
							logo,
							leaderName,
							leaderId,
							leaderIdPicBack,
							leaderIdPicFront,
							mobile,
							credentialsPic,
							shopType,
							shopServiceCategorys,
							otherCredentialsPic,
							otherShopPic,
							imgList,
							imgList2,
							longitude,
							latitude
						} = this
						if (!this.shopName) {
							return this.$util.msg('请输入店铺名字')
						}
						if (!this.address) {
							return this.$util.msg('请输入店铺地址')
						}
						if (!this.mobile) {
							return this.$util.msg('请输入联系方式')
						}
						if (!this.credentialsPic) {
							return this.$util.msg('请上传营业执照')
						}
						if (!this.logo) {
							return this.$util.msg('请上传店铺logo')
						}
						if (!this.leaderName) {
							return this.$util.msg('请输入法人姓名')
						}
						if (!checkIDCard(this.leaderId)) {
							return this.$util.msg('法人身份证格式有误')
						}
						if (!this.leaderIdPicBack) {
							return this.$util.msg('请上传身份证反面')
						}
						if (!this.leaderIdPicFront) {
							return this.$util.msg('请上传身份证正面')
						}
						if (!this.shopServiceCategorys) {
							return this.$util.msg('请选择技工服务类型')
						}
						console.log(this.otherCredentialsPic)
						if (this.imgList.length == 0) {
							return this.$util.msg('请上传门头照片和店内照片')
						}
						if (this.imgList2.length == 0) {
							return this.$util.msg('请上传其他资质正面')
						}
						const data = {
							shopName,
							address: this.detailedAddress,
							longitude,
							latitude,
							mobile,
							credentialsPic,
							logo,
							leaderName,
							leaderId,
							leaderIdPicBack,
							leaderIdPicFront,
							shopServiceCategorys,
							shopType,
							otherCredentialsPic: imgList2.toString(),
							otherShopPic: imgList.toString(),
							userId: uni.getStorageSync('userId') || appConfig.userId,

						}

						this.$jsonPost(this.$api.applyShop, data).then(rs => {
							console.log(rs)
							const [err, res] = rs
							if (res) {
								if (res.code == 200) {
									// #ifdef  MP-WEIXIN
									const data = {
										orderNo: res.data.orderNo,
										orderType: res.data.serviceType,
										payWay: 1,
										appId: this.$config.wxAppId,
										openId: uni.getStorageSync('openid')
									};
									// #endif

									// #ifdef  APP-PLUS
									const data = {
										orderNo: res.data.orderNo,
										orderType: res.data.serviceType,
										payWay: 2,
										appId: this.$config.appId,
										openId: uni.getStorageSync('openid')
									};
									// #endif

									this.$get(this.$api.weixinPay, data).then(res => {
										const [error, rs] = res
										if (rs) {
											console.log(rs);
											const data = rs.data;

											// #ifdef  MP-WEIXIN
											uni.requestPayment({
												provider: "wxpay",
												appId: data.appId,
												timeStamp: data.timeStamp,
												nonceStr: data.nonceStr,
												package: data._package,
												signType: data.signType,
												paySign: data.paySign,
												success: function(res) {
													console.log("success:" + JSON
														.stringify(res));
													uni.showToast({
														title: '请注意消息提醒，1~3个工作日有认证反馈',
														duration: 3000,
														icon: 'none'

													})

													setTimeout(() => {
														uni.navigateBack()
													}, 4000)
												},
												fail: function(err) {
													console.log("fail:" + JSON
														.stringify(err));
												},
											});
											// #endif
											// #ifdef  APP-PLUS
											uni.requestPayment({
												"provider": "wxpay",
												"orderInfo": {
													"appid": data
													.appId, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
													"noncestr": data.nonceStr, // 随机字符串
													"package": data._package, // 固定值
													"partnerid": data
													.partnerid, // 微信支付商户号
													"prepayid": data
													.prepayid, // 统一下单订单号 
													"timestamp": data
													.timeStamp, // 时间戳（单位：秒）
													"sign": data.sign // 签名，这里用的 MD5 签名
												},
												success(res) {
													uni.showToast({
														title: '请注意消息提醒，1~3个工作日有认证反馈',
														duration: 3000,
														icon: 'none'

													})
													setTimeout(() => {
														uni.navigateBack()
													}, 4000)
												},
												fail(e) {}
											})
											// #endif




										}
									})
								} else {
									that.$util.msg(res.message)

								}
							}
						})


					}
				})
			},
			async getDetail() {
				const data = {
					id: this.userInfo.shopServiceIdApply
				}
				const [err, rs] = await this.$get(this.$api.shop_detail, data)
				if (rs) {
					this.userInfoMsg = rs.data
					const res = rs.data
					this.shopName = res.shopName
					this.address = res.address
					this.longitude = res.longitude
					this.latitude = res.latitude
					this.mobile = res.mobile
					this.credentialsPic = res.credentialsPic
					this.logo = res.logo
					this.leaderName = res.leaderName
					this.leaderId = res.leaderId
					this.leaderIdPicBack = res.leaderIdPicBack
					this.leaderIdPicFront = res.leaderIdPicFront
					this.id = res.id
					this.checkeds = res.shopServiceSupportList
					const array = []
					for (let i in this.checkeds) {
						console.log(this.checkeds[i])
					
						array.push(this.checkeds[i].id)
						this.checkeds[i]['name'] = this.checkeds[i].shopServiceName


					}

					// this.shopServiceSupportList = array.toString()
					this.shopServiceCategorys = array.toString()
					this.imgList = res.otherShopPic.split(',')
					this.imgList2 = res.otherCredentialsPic.split(',')

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.unactive {
		pointer-events: none;
		margin-bottom: 60rpx;
	}

	.IDcard {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 156rpx;
				height: 156rpx;
			}
		}

	}

	.m-card {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #F4F4F4;

			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.t-btn {
		padding: 18rpx 28rpx;
	}

	.btn {
		margin: 60rpx 20rpx 20rpx;
	}

	.other-img {
		image {
			width: 226rpx;
			height: 226rpx;
		}

		.solids {
			width: 226rpx;
			height: 226rpx;
			background: #F4F4F4;
		}

		.solids::after {
			border: 0;
		}
	}
</style>
